<template>
  <div>
    <div class="table-pagination" ref="page-box">
      <el-pagination
        @size-change="$emit('handleSizeChange', arguments[0])"
        @current-change="$emit('handleCurrentChange', arguments[0])"
        :page-sizes="[5, 10]"
        :page-size="size"
        :total="total"
        :current-page="page"
        background
        :hide-on-single-page="true"
        layout="total,sizes,prev,pager,next,jumper"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class Pagination extends Vue {
  @Prop(Number) size!: 1;
  @Prop(Number) total!: 1;
  @Prop(Number) page!: 1;

  tableData: any[] = [];
}
</script>

<style scoped lang="scss">
.table-pagination {
  margin-top: 20px;
  overflow: hidden;
  > div {
    float: right;
  }
}
</style>